<template>
  <div class="register-container d-flex flex-column justify-content-center align-items-center vh-100">
    <div class="card p-5 shadow-lg" style="min-width:440px; max-width:520px; padding:56px 48px; background:transparent; border:none;">
      <h2 class="mb-4 text-center" style="color:#000; font-size:2.6rem; font-weight:bold;">注册</h2>
      <form @submit.prevent="handleRegister">
        <div class="mb-4">
          <input v-model="username" class="form-control form-control-lg bg-dark text-light border-secondary"
                 placeholder="用户名" required style="font-size:1.2rem;" />
        </div>
        <div class="mb-4">
          <input v-model="password" type="password" class="form-control form-control-lg bg-dark text-light border-secondary"
                 placeholder="密码" required style="font-size:1.2rem;" />
        </div>
        <button type="submit" class="btn btn-primary btn-lg w-100 mb-3" style="font-size:1.5rem; height:56px; padding:0;">注册</button>
      </form>
      <div class="text-center">
        <span style="color:#444;">已有账号？</span>
        <a @click="goToLogin" style="color:#4fc3f7; cursor:pointer; font-weight:bold;">登录</a>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
const username = ref('');
const password = ref('');
const router = useRouter();
const handleRegister = async () => {
  if (!username.value || !password.value) {
    alert('请输入用户名和密码');
    return;
  }
  try {
    // 假设后端注册API为 /api/register
    const res = await axios.post('/api/register', {
      username: username.value,
      password: password.value
    });
    if (res.data.code === 200) {
      alert('注册成功，请登录');
      router.push('/login');
    } else {
      alert(res.data.message || '注册失败');
    }
  } catch (e) {
    alert('注册失败');
  }
};
const goToLogin = () => {
  router.push('/login');
};
</script>
<style scoped>
.register-container {
  background: transparent;
}

.card {
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  background: transparent !important;
}
.form-control:focus {
  box-shadow: 0 0 0 2px #4fc3f7;
  border-color: #4fc3f7;
}
.card input.form-control {
  background: transparent !important;
  border: 2px solid #aaa !important;
  color: #111 !important;
  font-size: 1.2rem;
}
.card input.form-control::placeholder {
  color: #222;
  opacity: 1;
}
</style> 